El problema viene cuando el ancho de la plantilla es muy estrecho, como es el caso de este blog.
1º Para empezar seleccionamos el vídeo que queremos insertar.
2º Nos dirigimos a insertar
.jpg)
3º Seleccionamos el ancho más pequeño para que se ajuste a nuestro blog.
.jpg)
4º Copiamos y pegamos el código en la entrada que queramos.
Pero... si no se ajusta ¿Que debemos hacer?
Hay una parte del código que se puede tocar y nos facilitara ajustar el ancho como nosotros queramos. Esa parte está señalada en rojo.
<object width= "580" height="360" ><param name="movie" value="http://www.youtube.com/v/Yh1ae3IM41I&hl=es_ES&fs=1&rel=0&color1=0xcc2550&color2=0xe87a9f&border=1">
</param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Yh1ae3IM41I&hl=es_ES&fs=1&rel=0&color1=0xcc2550&color2=0xe87a9f&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="580" height="360" ></embed></object>
Es más, si no nos queremos complicar la vida con el ancho y el alto del vídeo, podemos coger solamente el ancho. Esto nos ayudara a que solo juguemos con una sola medida.
<object width="170" ><param name="movie" value="http://www.youtube.com/v/Yh1ae3IM41I&hl=es_ES&fs=1&rel=0&color1=0xcc2550&color2=0xe87a9f&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Yh1ae3IM41I&hl=es_ES&fs=1&rel=0&color1=0xcc2550&color2=0xe87a9f&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="170" ></embed></object>
Como podéis ver hemos eliminado height del código y así solo tenemos que asignarle una medida a la variable width. Por estética, el valor mínimo que podemos darle a la variable width es de 170.
Compartir
Entradas
Los selectores nos permiten dar nombre a los elementos en HTML.
Los atributos que se pueden utilizar con casi todos los elementos son id y class.
Una id con un nombre asignado, solo puede aparecer una vez en una página Web.
Para poder utilizar el id como un selector le asignaremos un nombre con #.
ej: # dormiluno (el nombre es asignado en la hoja de estilos, <style type="text/css"> )
El atributo class se bautiza poniéndole un punto al principio del nombre.
ej: . dormiluna (también ira instalado en la hoja de estilos)
El atributo class (al contrario que el atributo id) puede aparecer varias veces en una página Web.
Id y class aparecerán en la página Web de la siguiente manera:
<div id='dormiluno'>
<div class='dormiluna'>
.....................................................
</div>
</div>
Para ver esto más claro, crearemos un marco, que en su interior encontraremos una imagen y un texto.
El tamaño del marco, la definición del borde y donde estará situado su contenido (dentro del marco), lo realizaremos mediante este código (ira en la hoja de estilos):
.somediv{
width: 120px;
clear: left;
border: 6px outset #ffaeff;
}
.somediv .floatbox{
float: left;
width: 10px;
}
* html .somediv p{ /* IE 3px jog hack*/
height: 1%;
}
.somediv p{
margin-top: 0;
margin-left: 50px;
}
Para que se visualice podemos poner el siguiente código, ya sea en una entrada o en un widget.
<div class='somediv'>
<div class='floatbox'>
<img border='0' src='http://imagen' width='50' />
</div>
<p>Las palabras que encierran la verdad nunca suenan bien. Las palabras que suenan bien no expresan la verdad. Felices Fiestas.</p>
</div>
El tamaño de la imagen width a de ir en consonancia con el marco, porque sino quedara todo el contenido descentrado.
Ahora si queremos complementar este código podemos añadir un atributo id:
#dormiluno {
margin: 0px 1px 0px 2px; float: left;
background-image:url(http://imagen);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 65%;
letter-spacing: -.08em;
}
Y para visualizar el conjunto en una entrada o como un widget, ponemos el siguiente código:
<div id='dormiluno'>
<div class='somediv'>
<div class='floatbox'>
<img border='0' src='http://imagen' width='50'/>
</div>
<p>Las palabras que encierran la verdad nunca suenan bien. Las palabras que suenan bien no expresan la verdad. Felices Fiestas.</p>
</div>
</div>
Ej. con id y class
Ej. con class
Las palabras que encierran la verdad nunca suenan bien. Las palabras que suenan bien no expresan la verdad. Felices Fiestas.